<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>练习作品列表</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            cursor: pointer;
            color: #08c;
        }

        body {
            font: 14px/1.5 "Hiragino Sans GB", "Hiragino Sans GB W3", 微软雅黑;
            background: rgb(255, 255, 255);
        }

        .content {
            width: 500px;
            font-size: 22px;
            margin: 20px auto 0;
            padding: 40px 20px;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
            box-shadow: 0px 2px 3px #ececec;
            background: #fff;
        }

        .list {
            padding: 0 60px;
        }

        .list li h1 {
            font-size: 22px;
            font-style: normal;
            font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", 微软雅黑;
        }

        .list li a {
            line-height: 50px;
        }

        .list li a:hover {
            border-radius: 5px;
            color: #fff;
            text-shadow: 0 2px 1px #360;
            background-color: #393;
            background-image: -moz-linear-gradient(top, #62c462, #51a351);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
            background-image: -webkit-linear-gradient(top, #62c462, #51a351);
            background-image: -o-linear-gradient(top, #62c462, #51a351);
            background-image: linear-gradient(to bottom, #62c462, #51a351);
            background-repeat: repeat-x;
            border-color: #51a351 #51a351 #387038;
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            text-decoration: none;
            text-indent: 25px;
        }

        .list li a {
            display: block;
            padding: 5px 8px;
            transition: all 0.6s;
        }

        .sub {
            display: none;
        }

        .sub a {
            margin-left: 25px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        /* [v-cloak] {
			display: none;
		} */
    </style>
</head>

<body>
    <div class="content" id="app">
        <ol class="list" v-cloak>
            <li v-for="example in list">
                <h1><a href="javascript:;" v-text="example.name"></a></h1>
                <dl class="sub">
                    <dd v-for="item in example.items"><a target="_blank" :href="item.link" :title="item.name" v-text="item.name"></a></dd>
                </dl>
            </li>
        </ol>
    </div>
    <script type="text/javascript" src="../common/jquery.min.js"></script>
    <script type="text/javascript" src="//unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                list: [
                    {
                        name: "表单",
                        items: [
                            {
                                name: "过滤空格",
                                link: "demoForm/form1.html"
                            }, {
                                name: "验证用户是否输入",
                                link: "demoForm/form2.html"
                            }, {
                                name: "用value实现placeholder的效果",
                                link: "demoForm/form3.html"
                            }, {
                                name: "禁止输入",
                                link: "demoForm/form4.html"
                            }, {
                                name: "复选框全选/全不选",
                                link: "demoForm/form5.html"
                            }, {
                                name: "关闭中文输入法",
                                link: "demoForm/form6.html"
                            }, {
                                name: "复制粘帖",
                                link: "demoForm/form7.html"
                            }, {
                                name: "限制只能输入数字",
                                link: "demoForm/form8.html"
                            }, {
                                name: "提示可输入剩余字数",
                                link: "demoForm/form9.html"
                            }
                        ]
                    }, {
                        name: "Css例子",
                        items: [
                            {
                                name: "3D立方体",
                                link: "demoCss/cude.html"
                            }, {
                                name: "Loading加载",
                                link: "demoCss/loading.html"
                            }, {
                                name: "打字机效果",
                                link: "demoCss/typing.html"
                            }
                        ]
                    }, {
                        name: "Javascript例子",
                        items: [
                            {
                                name: "消息提示",
                                link: "demoJs/message.html"
                            }, {
                                name: "放大镜",
                                link: "demoJs/pic_big.html"
                            }, {
                                name: "验证码倒计时",
                                link: "demoJs/codedown.html"
                            }
                        ]
                    }, {
                        name: "Vue.js例子",
                        items: [
                            {
                                name: "VUE日历",
                                link: "demoVue/calendar.html"
                            }, {
                                name: "VUE级联选择",
                                link: "demoVue/cascader.html"
                            }
                        ]
                    }, {
                        name: "Canvas例子",
                        items: [
                            {
                                name: "倒计时",
                                link: "demoCanvas/countdown.html"
                            }
                        ]
                    }
                ]
            },
            mounted: function () {
                $(".list h1").on("click", function () {
                    if ($(this).siblings(".sub").css("display") === "none") {
                        $(".sub").slideUp(300);
                        $(this).siblings(".sub").slideDown(300);
                    } else {
                        $(this).siblings(".sub").slideUp(300);
                    }
                });
            }
        })
    </script>
</body>

</html>